<template>
  <view class="tripPerception">
    <view class="text text1">
      <view class="title">行程感悟</view>
      <view class="content">
				<textarea v-model="data.apperception" class="textarea" maxlength="100000" placeholder="请输入行程感悟">
        </textarea>
        <view class="problem">
          <view v-for="(item, index) in data.imageUrls" :key="index" class="box">
            <image v-if="item" :src="item" style="width: 100%; height: 100%"></image>
          </view>
          <view class="box" @click="uploadImg">
            <image class="icon"
                   src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/add-icon.png"></image>
          </view>
        </view>

        <image class="tj-btn" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/tj-btn.png"
               @click="onSubmit"></image>
      </view>
    </view>

    <zy-view ref="zView" :delta="delta" :obj="data"></zy-view>
  </view>
</template>

<script>
import {
  newlyInspiration,
  newlyApperception
} from "@/api/challenge";
import {
  uploadImage
} from "@/api/upload.js";

export default {
  data() {
    return {
      imgList: [],
      data: {
        apperception: "",
        imageUrls: [],
        phone: null,
        proposalId: null,
        itineraryId: null,
        groupId: null,
        partyId: null,
        apperceptionId: null,
        returnType: null,
        deltaNumber: 0
      },
      delta: 1,
    };
  },
  onLoad({
           apperceptionId,
           proposalId,
           itineraryId,
           partyId,
           delta = 1,
           groupId,
           returnType,
           deltaNumber
         }) {
    // bl 是否返回几层
    this.data.apperceptionId = Number(apperceptionId);
    this.data.proposalId = Number(proposalId);
    this.data.itineraryId = Number(itineraryId);
    this.data.partyId = Number(partyId);
    this.data.groupId = groupId ? Number(groupId) : "";
    this.delta = delta;
    let {
      phone
    } = uni.getStorageSync("userinfo");
    this.data.phone = phone;
    if (returnType) {
      this.data.returnType = returnType
    }
    if (deltaNumber) {
      this.data.deltaNumber = Number(deltaNumber) + 1
    }
  },
  computed: {
    addImageShow() {
      return this.imgList.length >= 9 ? false : true;
    },
  },
  methods: {
    uploadImg() {
      if (this.data.imageUrls.length >= 9) {
        uni.showToast({
          icon: "none",
          title: "最多上传9张图片",
        });
      }
      uploadImage(9).then((res) => {
        this.data.imageUrls = this.data.imageUrls.concat(res);
        this.data.imageUrls = this.data.imageUrls.slice(0, 9);
      });
      // uni.chooseImage({
      // 	count: 9,
      // 	success: (res) => {
      // 		this.imgList = this.imgList.concat(res.tempFilePaths)
      //     this.imgList = this.imgList.slice(0, 9)
      // 	}
      // })
    },
    onSubmit() {
      if (this.data.apperception == "") {
        uni.showToast({
          icon: "none",
          title: "请输入行程感悟",
        });
      } else {
        // this.$refs.zView.show()
        newlyInspiration(this.data).then((res) => {
          // if (res) {
          this.$refs.zView.show();
          // } else {
          //   uni.showToast({
          //     title: "提交失败",
          //     icon: "none",
          //   })
          // }
        });
      }

    },
  },
};
</script>

<style>
page {
  min-height: 100%;
  background-color: rgba(235, 236, 237, 1);
}
</style>
<style lang="scss" scoped>
.tripPerception {
  width: 670rpx;
  margin: 40rpx auto;

  .text {
    width: 100%;
    border-radius: 25rpx;
    background: rgba(255, 254, 222, 1);
    box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.1);
    margin-bottom: 40rpx;
    font-size: 24rpx;
    line-height: 34.75rpx;
  }

  .content {
    box-sizing: border-box;
    width: 100%;
    padding: 30rpx 24rpx;
  }

  .text1 {
    width: 100%;
    border-radius: 20rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.24);
    margin-bottom: 40rpx;

    .title {
      font-size: 36rpx;
      font-weight: 700;
      line-height: 90rpx;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      width: 100%;
      height: 90rpx;
      border-radius: 20px 20px 0px 0px;
      background: rgba(43, 122, 251, 1);
    }
  }

  .textarea {
    width: 100%;

    border-radius: 12rpx;
    background: rgba(240, 240, 240, 1);
    border: 1rpx solid rgba(166, 166, 166, 1);
    margin: 20rpx 0;
    font-size: 40rpx;
    line-height: 70rpx;
    color: rgba(56, 56, 56, 1);
    text-align: center;
    padding: 20rpx;
    box-sizing: border-box;
  }

  .box {
    width: 100%;
    height: 345rpx;
    background: rgba(248, 248, 250, 1);
    border: 2px solid rgba(229, 229, 229, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20rpx 0;

    .icon {
      width: 94rpx;
      height: 94rpx;
    }
  }

  .tj-btn {
    width: 380rpx;
    height: 90rpx;
    display: block;
    margin: 20rpx auto;
  }
}
</style>
